<template>
  <div style="background-color: #c7c7c7;">
    <!-- <x-header :right-options="{showMore: true}" @on-click-more="showMenus = true">帖子详情</x-header> -->
    <flexbox orient="vertical">

    <flexbox-item>
    <div class="flex-demo">
    <div>

    <div class="namebox">
    <div class="namemsg">
    <img class="touxiang" src="static/img/游戏.png" alt="">
    <div class="Tname">
    <span class="name">名我的二维瓦尔多瓦单杀哈哈哈来达瓦</span>
    <span class="time">12/6</span>  
    </div>  
    </div>
    <button class="gz">关注</button>
    </div>

    <p class="Title">是大煞风景黄金矿工回房间咖啡馆是骨灰级法律和抵抗力交话费框架内

    <div class="Timg">
    <img v-for="(item, index) in list1" :src="item.src" width="100" preview='ww' preview-text="hahaha"> 
    </div>

    <div class="Tclick">
    <router-link class="rline" :to="'/Postdetails'">
    <div class="Tmsg">
    <img slot="icon" src="static/img/msg.png" width="30">
    <p>{{msg}}</p>
    </div>
    </router-link>
    <div class="Tlike" @click="onlike">
    <img slot="icon" src="static/img/like.png" width="30">
    <p>{{like}}</p>
    </div>
    <div class="Tunlike" @click="onunlike">
    <img slot="icon" src="static/img/unlike.png" width="30">
    <p>{{unlike}}</p>
    </div>
    </div>

    </div>
    </div>
    </flexbox-item>
        <flexbox-item>
    <div class="flex-demo">
    <div>

    <div class="namebox">
    <div class="namemsg">
    <img class="touxiang" src="static/img/游戏.png" alt="">
    <div class="Tname">
    <span class="name">名我的二维瓦尔多瓦单杀哈哈哈来达瓦</span>
    <span class="time">12/6</span>  
    </div>  
    </div>
    <button class="gz">关注</button>
    </div>

    <p class="Title">是大煞风景黄金矿工回房间咖啡馆是骨灰级法律和抵抗力交话费框架内

    <div class="Timg">
    <img v-for="(item, index) in list1" :src="item.src" width="100" preview='ww' preview-text="hahaha"> 
    </div>

    <div class="Tclick">
    <router-link class="rline" :to="'/Postdetails'">
    <div class="Tmsg">
    <img slot="icon" src="static/img/msg.png" width="30">
    <p>{{msg}}</p>
    </div>
    </router-link>
    <div class="Tlike" @click="onlike">
    <img slot="icon" src="static/img/like.png" width="30">
    <p>{{like}}</p>
    </div>
    <div class="Tunlike" @click="onunlike">
    <img slot="icon" src="static/img/unlike.png" width="30">
    <p>{{unlike}}</p>
    </div>
    </div>

    </div>
    </div>
    </flexbox-item>

    </flexbox>
    <br><br><br>
  </div>
</template>
<script>
import { TransferDom } from 'vux'
export default {
    directives: {
    TransferDom
    },
    methods: {
    onlike(){
      this.like=parseInt(this.like)+1;
    },
    onunlike(){
      this.unlike=parseInt(this.unlike)+1;
    },
  },
  data () {
    return {
      list: [{
        msrc: 'static/img/游戏.png',
        src: 'static/img/游戏.png',
      },
      {
        msrc: 'static/img/设置.png',
        src: 'static/img/设置.png',
      }, 
      {
        msrc: 'static/img/M.png',
        src: 'static/img/M.png',
      }, 
      {
        msrc: 'static/img/首页.png',
        src: 'static/img/首页.png',
      },
      {
        msrc: 'static/img/消息.png',
        src: 'static/img/消息.png'
      }],
      list1: [{
        msrc: 'static/img/我的.png',
        src: 'static/img/我的.png',
      },
      {
        msrc: 'static/img/logo.png',
        src: 'static/img/logo.png',
      }, 
      {
        msrc: 'static/img/设置.png',
        src: 'static/img/设置.png',
      }],
      like:'99',
      unlike:'10',
      msg:'30'
    }
  }
  
}
</script>

<style lang="less" scoped>
@import '~vux/src/styles/1px.less';

.rline{
text-decoration:none;  /*超链接无下划线*/
}
.flex-demo {//帖子css
  width: 100%;
  background-color: #f8f6f6;
  border-radius: 4px;
  background-clip: padding-box;

  display: flex;
  display: -webkit-flex;
  flex-direction: column;
}
.namebox{
  margin-top: 10px;
  display: flex;
  justify-content:space-between;
  align-items:center;
}
.namemsg{
  margin-left: 20px;
  display: flex;
  flex-direction: row;
  justify-content:flex-start;
  width: 70%;
}
.Tname{
  display: flex;
  flex-direction: column;
}
.touxiang{
    background-color: aliceblue;
    border-radius: 50%;
    height: 50px;
    width: 50px;
    margin-right: 20px;
}
.name{
  margin-bottom: 5px;
  width: 200px;
  color: rgb(59, 59, 59);
  font-size: 14px;
  white-space:nowrap; 
  text-overflow:ellipsis;
  overflow:hidden;
}
.time{
  color: rgb(88, 88, 88);
  font-size: 12px;
}
.gz{
  margin-right: 20px;
  white-space:nowrap; 
    background-color: white; 
    color: black; 
    border: 2px solid #008CBA;
    border-radius: 15px;
    font-size: 12px;
    padding: 5px 15px;

}
.Tclick{
  display: flex;
  align-items:center;
  justify-content:space-around;
  margin-bottom: 10px;
}
.Tmsg{
  display: flex;
  align-items:center;
  justify-content:space-around;
}
.Tlike{
  display: flex;
  align-items:center;
  justify-content:space-around;
}
.Tunlike{
  display: flex;
  align-items:center;
  justify-content:space-around;
}


.Title{
margin-left: 20px;
margin-right: 20px;
display: -webkit-box;    
-webkit-box-orient: vertical;    
-webkit-line-clamp: 3;    
overflow: hidden;
}
.Timg{
margin-left: 10%;
width: 80%;
}
</style>